<template>
  <div class="main">
    <el-card class="box-card">
      <el-form :model="typeform" label-width="80px">
        <el-form-item label="类型">
          <el-radio-group v-model="typeform.type" @change="changetype">
            <el-radio :label="0">文章</el-radio>
            <el-radio :label="1">链接</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <Form v-if="typeform.type == 1" ref="form" :formobj="formobj" :formdata="formData" :formrules="formrules" />
      <Form v-else-if="typeform.type == 0" ref="form" :formobj="formobj1" :formdata="formData1" :formrules="formrules1" />
      <div style="padding-left:100px">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import Form from '@/components/form.vue'
import { contentApiAdd, columnqueryAll, contentApiedit, contentApiqueryOne } from '@/api/webpage'
import { validateNum } from '@/utils/validator'
export default {
  name: 'Tuwenaddform',
  components: {
    Form
  },
  data() {
    return {
      typeform: {
        type: 0
      },
      options: [],
      formData: {
        columnId: '',
        ctitle: '',
        title: '',
        link: '',
        no: '',
        content: '',
        url: '',
        listfile: []
      },
      formobj: [
        { label: '所属栏目', key: 'columnId', type: 'select', options: [], disabled: true },
        { label: '图片', key: 'url', type: 'pic' },
        { label: '标题', key: 'title', type: 'input' },
        { label: '链接', key: 'link', type: 'input' },
        { label: '排序', key: 'no', type: 'input' }
      ],
      formrules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        no: [
          { required: false, message: '请输入链接', trigger: 'blur' }
        ]
      },

      formData1: {
        columnId: '',
        ctitle: '',
        title: '',
        no: '',
        content: '',
        url: '',
        fileUrl: '',
        signBy: '',
        createTime: '',
        type: 'article',
        listfile: []
      },
      formobj1: [
        { label: '所属栏目', key: 'columnId', type: 'select', options: [], disabled: true },
        { label: '图片', key: 'url', type: 'pic' },
        { label: '标题', key: 'title', type: 'input' },
        { label: '作者', key: 'author', type: 'input' },
        { label: '审核人', key: 'postedBy', type: 'input' },
        { label: '排序', key: 'no', type: 'input' },
        { label: '内容', key: 'content', type: 'editor' },
        { label: '附件', key: 'listfile', type: 'execl', word: '请上传文件' },
        { label: '发布时间', key: 'createTime', type: 'date' }
      ],
      formrules1: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        no: [
          { required: false, message: '请输入序号', trigger: 'blur' },
          {
            validator: validateNum,
            message: '请输入正整数',
            trigger: 'blur'
          }
        ],
        content: [
          { required: false, message: '请输入正文', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.cid) {
      this.formobj[0].disabled = true
      this.formData1.columnId = this.formData.columnId = this.$route.query.cid
    } else {
      this.formobj[0].disabled = false
    }

    if (this.$route.query.id) {
      this.getdata(this.$route.query.id)
    }

    this.getlist()
  },
  methods: {
    getdata(id) {
      contentApiqueryOne({ id: id }).then(res => {
        if (res.code == 0) {
          this.typeform.type = res.data.type ? Number(res.data.type) : 1
          if (this.typeform.type == 0) {
            this.formData1 = res.data
          } else {
            console.log('%c [  ]-127', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.fileUrl)
            if (res.data.fileUrl) {
              res.data.link = res.data.fileUrl
            }
            this.formData = res.data
          }
        }
      })
    },
    getlist() {
      const data = {
        name: '',
        code: '',
        parentId: ''
      }
      columnqueryAll(data).then((res) => {
        if (res.code == 0) {
          this.options = this.formobj[0].options = this.formobj1[0].options = res.data.map(item => {
            return { label: item.name, value: item.id }
          })
        }
      })
    },
    handleCurrentChange(val) {
      this.params.page = val
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getlist()
    },
    changetype() {
      this.$refs.form.resetForm()
      this.$refs.form.clearValidate()
    },
    submit() {
      this.$refs.form.getData().then(res => {

        console.log('通讯录~ res', res)
        // 处理fileName
        let b = []
        let a = []
        if(res.listfile && Array.isArray(res.listfile)){
          res.fileName = ''
          res.listfile.map(it=>{
            b.push(it.name)
            console.log("看看存在不存在show",it.url.indexOf('/show'))
            if(it.url.indexOf("/show") == -1){ // 不包含
              a.push(it.url)
            }else{
              a.push(it.url.substring(5)) // 截取/show 以后的字符串
            }
          })
          res.fileName = b.join(',')
          res.fileUrl = a.join(',')
        }
        console.log('处理的通讯录~ res',res);
        // 添加或者更新数据
        if (this.$route.query.type == 'edit') {
          if (this.$route.query.cid == '3EAF2414CC014BDBBF19260DE53332C4') {
            res.fileUrl = res.link
          }
          contentApiedit(res).then((response) => {
            if (response.data == 1) {
              this.$message.success('成功')
              this.$router.go(-1)
            } else {
              this.$message.error('失败')
            }
          })
            .catch((err) => {
              console.log(err)
            })
        } else {
          res.type = this.typeform.type
          res.columnId = this.$route.query.cid
          if (this.$route.query.cid == '3EAF2414CC014BDBBF19260DE53332C4') {
            res.fileUrl = res.link
          }
          contentApiAdd(res).then((response) => {
            if (response.data == 1) {
              this.$message.success('成功')
              this.$router.go(-1)
            } else {
              this.$message.error('失败')
            }
          })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
@import "~@/assets/css/adminstyle.css";
</style>
<style>
.el-popper{ z-index: 10004 !important;}
</style>
